<template>
  <div class="dialog-wrapper">
    <el-dialog
      :visible.sync="fitVisible"
      title="选择产品"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleCancel"
      style="z-index: 1000"
    >
      <el-card shadow="never" class="aui-card--fill managementWrapper">
        <div class="mod-sys__user">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="getDataList()"
          >
            <el-form-item>
              <el-input
                v-model="dataForm.name"
                placeholder="产品名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList()">搜索</el-button>
            </el-form-item>
          </el-form>
          <!-- 单选 -->
          <!-- @selection-change="dataListSelectionChangeHandle"
            @row-click="singleElection" -->
          <!-- @selection-change="handleSelectionChange" -->
          <!-- @select="onSelect" -->
          <el-table
            ref="multipleTable"
            v-loading="dataListLoading"
            :data="dataList"
            style="width: 100%"
            @select="onSelect"
            border
          >
            <el-table-column type="selection" width="40"> </el-table-column>
            <!-- <el-table-column label="" align="center" width="35">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.$index"
                  v-model="templateSelection"
                  @change.native="getCurrentRow(scope.row)"
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-radio
                >
              </template>
            </el-table-column> -->
            <el-table-column
              type="index"
              label="序号"
              header-align="center"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column label="产品" header-align="center" align="center">
              <template slot-scope="scope">
                <div class="disCenter itemBox">
                  <div class="imgBox">
                    <img :src="scope.row.master_pic" />
                  </div>
                  <div class="rightBox">
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="scope.row.name"
                      placement="top"
                    >
                      <span class="top overTwoHidden">{{
                        scope.row.name
                      }}</span>
                    </el-tooltip>

                    <span class="bottom"
                      >产品编号: {{ scope.row.product_serial }}</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注"
              width="270"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <div class="overTwoHidden" style="max-width: 260px">
                  {{ scope.row.remarks }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="num"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChangeHandle"
            @current-change="pageCurrentChangeHandle"
          >
          </el-pagination>
        </div>
      </el-card>
      <template slot="footer">
        <el-button @click="handleCancel">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="handleCheck">{{
          $t('confirm')
        }}</el-button>
      </template>
      <SkuChoose
        v-if="dialogVisible"
        ref="productSku"
        @handleClose="skuClose"
        @handleConfirm="skuConfirm"
        :skuList="skuArr"
      ></SkuChoose>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
import mixinViewModule from '@/mixins/view-module'
import SkuChoose from '@/components/sku-choose'
export default {
  mixins: [mixinViewModule],
  components: {
    SkuChoose,
  },
  props: {
    // 新增编辑页已选择数据，sku选择页面已选数据禁止选择
    chooseData: {
      type: Array,
    },
    is_bom: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/product',
        getDataListIsPage: true,
      },
      dataForm: {
        name: '',
        is_bom: '0',
      },
      fitVisible: true,
      dialogVisible: false,
      chooseProductInfo: {},
      skuArr: [],
      // templateSelection: "",
      callbackList: [],
      chooseProductListObj: {},
    }
  },
  watch: {
    is_bom: {
      handler(val) {
        console.log(val)
        if (val) {
          this.dataForm.is_bom = '1'
        }
      },
      immediate: true,
    },
  },

  methods: {
    // getCurrentRow(row) {
    //   this.templateSelection = this.dataList.indexOf(row);
    //   this.chooseProductInfo = row;
    //   console.log(this.chooseData);
    //   // 筛选匹配对应产品id数据
    //   const fitProductList = this.chooseData.filter(
    //     (item) => item.product_id === row.id
    //   );
    //   if (fitProductList.length > 0) {
    //     let arr = JSON.parse(JSON.stringify(row.sku_list));
    //     let temp = [];
    //     fitProductList.forEach((item) => {
    //       temp = arr.filter((it) => it.id !== item.product_sku_id);
    //       arr = [...temp];
    //     });
    //     this.skuArr = temp;
    //   } else {
    //     this.skuArr = row.sku_list;
    //   }
    //   this.callbackList = [];
    //   if (row.sku_list.length > 0) {
    //     this.dialogVisible = true;
    //   } else {
    //     this.$message.warning("当前产品暂无可添加SKU数据，请添加后操作！");
    //   }
    // },
    getCurrentCheckSkuList(row) {
      const list = _.cloneDeep(this.chooseData)
      const fitProductList = list.filter((item) => item.product_id === row.id)
      // debugger
      let tempSkuList = []
      if (fitProductList.length > 0) {
        // JSON.parse(JSON.stringify(row.sku_list))
        let arr = _.cloneDeep(row.sku_list)
        let temp = []
        fitProductList.forEach((item) => {
          temp = arr.filter((it) => it.id !== item.product_sku_id)
          arr = [...temp]
        })
        tempSkuList = temp
      } else {
        tempSkuList = row.sku_list
      }
      return tempSkuList
    },
    onSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1
      if (selected) {
        this.chooseProductInfo = row
        const list = this.getCurrentCheckSkuList(row)

        if (list.length > 0) {
          this.dialogVisible = true
          this.skuArr = list
        } else {
          this.$message.warning('当前产品暂无可添加SKU数据，请添加后操作！')
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      } else {
        const key = row.id
        this.chooseProductListObj[key] = []
      }
    },
    skuConfirm(row) {
      const arr = []
      row.forEach((item) => {
        const { id, product_id, product_sku_id, sku_name, bom_id } = item
        const { name, product_serial, master_pic } = this.chooseProductInfo
        const temp = {
          // 子订单id
          id: 0,
          product_id,
          product_sku_id,
          sku_name,
          price: null,
          sale_num: null,
          delivery_date: null,
          product_name: name,
          product_serial,
          bom_id,
          product_master_pic: master_pic,
        }
        arr.push(temp)
      })
      const key = this.chooseProductInfo.id
      this.chooseProductListObj[key] = arr
      console.log(this.chooseProductListObj)
      // this.callbackList = arr;
    },
    skuClose() {
      this.dialogVisible = false
    },
    // handleSelectionChange(val) {
    //   this.chooseProductInfo = val;
    //   this.skuArr = val[0].sku_list;
    //   if (val.length > 0) this.dialogVisible = true;
    // },
    handleCheck() {
      // if (!this.chooseProductInfo?.name) {
      //   this.$message.warning("请选择产品");
      //   return;
      // }
      let arr = []
      for (let key in this.chooseProductListObj) {
        arr = [...arr, ...this.chooseProductListObj[key]]
      }

      console.log(arr)
      if (arr.length < 1) {
        this.$message.warning('请选择产品对应SKU数据！')
        return
      }
      console.log(arr)
      this.$emit('handleConfirm', arr)
      this.$emit('handleClose')
    },
    // singleElection(row) {
    //   this.chooseProductInfo = row;
    // },
    handleCancel() {
      this.$emit('handleClose')
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  ::v-deep .el-dialog {
    width: 50% !important;
  }
  .managementWrapper {
    .prodBox {
      padding-left: 6px;
      .imgBox {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightBox {
        margin-left: 14px;
        text-align: left;
        .top {
          max-width: 200px;
          margin-bottom: 6px;
        }
        .bottom {
          color: $mainColor;
        }
      }
    }
  }
}
</style>

<style lang="scss">
::v-deep .el-dialog__footer {
  border-top: 1px solid #f4f4f4 !important;
  padding: 16px 20px 16px !important;
}
</style>
